<template>
    <div :class="['side',visible?'show':'']">
        <div class="side_title">
            <div class="side_title_l">{{dialogStatus}}</div>
            <div class="side_title_r">
                <el-button @click="visible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="dataFormSubmit">
                    确认
                </el-button>
            </div>
        </div>
        <div class="side_content">
            <div class="side_t">
                <el-table :key="tableKey" v-loading="listLoading" row-key="menuId" height="100%" :data="list" border fit
                    highlight-current-row style="width: 100%;" @selection-change="selectionChangeHandle">

                    <el-table-column type="selection" header-align="center" align="center" width="50" />

                    <el-table-column prop="name" header-align="center" align="center" label="房屋名称" />
                    <el-table-column prop="type" header-align="center" align="center" label="房屋功能" />
                    <el-table-column prop="area" header-align="center" align="center" label="面积(m²)" />

                    <el-table-column prop="updateTime" header-align="center" align="center" width="180" label="最后编辑时间">
                        <template slot-scope="scope">{{ scope.row.updateTime | toData }}</template>
                    </el-table-column>
                    <el-table-column prop="updateUser" header-align="center" align="center" label="编辑人" />
                    <el-table-column header-align="center" align="center" width="150" label="操作">
                        <template slot-scope="scope">
                            <el-button v-permission="['sys:config:update']" type="text" size="small" @click="handleUpdate(scope.row)">
                                修改
                            </el-button>
                            <el-button v-permission="['sys:config:delete']" type="text" size="small" @click="deleteHandle(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            <div class="side_c">
                <div class="side_c_l">
                    绑定客户信息
                </div>
                <div class="side_c_r">
                    <el-form ref="filtrateForm" :inline="true" :model="filtrateForm" label-width="80px">
                        <el-form-item label="房屋名称">
                            <el-input placeholder="请输入" style="width:160px;" clearable />
                        </el-form-item>
                    </el-form>

                </div>
            </div>
            <div class="side_b">
                <el-table :key="tableKey1" v-loading="listLoading1" row-key="menuId" height="100%" :data="list" border fit
                    highlight-current-row style="width: 100%;" @selection-change="selectionChangeHandle">

                    <el-table-column type="selection" header-align="center" align="center" width="50" />

                    <el-table-column prop="name" header-align="center" align="center" label="房屋名称" />
                    <el-table-column prop="type" header-align="center" align="center" label="房屋功能" />
                    <el-table-column prop="area" header-align="center" align="center" label="面积(m²)" />

                    <el-table-column prop="updateTime" header-align="center" align="center" width="180" label="最后编辑时间">
                        <template slot-scope="scope">{{ scope.row.updateTime | toData }}</template>
                    </el-table-column>
                    <el-table-column prop="updateUser" header-align="center" align="center" label="编辑人" />
                    <el-table-column header-align="center" align="center" width="150" label="操作">
                        <template slot-scope="scope">
                            <el-button v-permission="['sys:config:update']" type="text" size="small" @click="handleUpdate(scope.row)">
                                修改
                            </el-button>
                            <el-button v-permission="['sys:config:delete']" type="text" size="small" @click="deleteHandle(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>

            <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </div>
        <div :class="['side_zz',visible?'show':'']"></div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination 分页组件
export default {
    components: { Pagination },
    data () {
        return {
            dialogStatus: '客户信息管理',
            visible: false,
            //筛选条件
            filtrateForm: {

            },
            tableKey: 0,
            list: [], // 表格数据
            total: 0, // 总条数
            listLoading: false, // 表格加载数据时的 loading
            listQuery: { // 表格当前页 和 当前页的展示数量
                page: 1,
                limit: 20
            },
            tableKey1: 0,
            list1: [], // 表格数据
            total: 0, // 总条数
            listLoading1: false, // 表格加载数据时的 loading
            listQuery1: { // 表格当前页 和 当前页的展示数量
                page: 1,
                limit: 20
            },
        }
    },
    created () {

    },
    methods: {
        // 初始化
        init (status, param) {
            //   console.log(param)
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            // this[status](param) // 新增或者修改
            this.create()
            // this.$nextTick(() => { // 重置表单
            //     this.$refs['temp'].clearValidate()
            // })
        },
        create (param) {

        },
        getList () {

        },
        selectionChangeHandle () {

        }
    }
}
</script>

<style lang="scss" scoped>
.side_zz {
    position: fixed;
    width: 0;
    height: 100%;
    z-index: -10;
    top: 0;
    bottom: 0;
    right: 800px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.1s linear;
    opacity: 0;
}
.side_zz.show {
    width: calc(100% - 800px);
    opacity: 1;
}
.side {
    position: fixed;
    right: -900px;
    top: 0;
    z-index: 9999;
    width: 800px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s linear;
    padding: 10px;
    box-sizing: border-box;
}
.side.show {
    right: 0;
}
.side_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    font-weight: 600;
}
.side_content {
    width: 100%;
    height: calc(100% - 40px);
    padding: 10px 0;
    box-sizing: border-box;
}
.side_t {
    width: 100%;
    height: calc(40% - 100px);
}
.side_c {
    width: 100%;
    height: 100px;
}
.side_b {
    width: 100%;
    height: calc(60% - 50px);
}
.side_title {
    display: flex;
    justify-content: center;
    flex-flow: row;
}
.side_title_l {
    flex: 0 0 160px;
}
.side_title_r {
    flex: 1;
    text-align: right;
}
</style>